<template>
	<view class="box">
		<view class="top_tip">
			<text>收获地址</text>
			<view class="delete" @tap="deleteList">
				<van-icon name="delete-o" />
			</view>
		</view>
		<scroll-view :scroll-y="true" class="address">
			<view class="address_box">
				
				<checkbox-group @change="checkboxChange">
					
					<view class="address_list" v-for="(val,index) in addressList">
						<view class="address_left">
							<view class="checked_box" v-show="checkedStatus">
								<label>
									<checkbox :value="val._id" :checked="status"/><text></text>
								</label>
							</view>
							<view class="person_data">
								<view class="p1">
									<text>{{val.city}} {{val.address}}11111111111</text>
								</view>
								<view class="p2">
									<text class="name">{{val.person}}</text>
									<text class="gender" :v-text="val.gender=='男' ? '先生' : '女士'"></text>
									<text class="phone">{{val.phone}}</text>
								</view>
							</view>
						</view>
						
						<view class="address_right" @tap="updateAddress(val)">
							<van-icon name="edit" />
						</view>
					</view>
					
					
				</checkbox-group>
				
				{{checked}}
				
			</view>
		</scroll-view>
		
		<view class="add_address">
			<view class="tipbox" @tap="addAddress">
				<text>+添加地址</text>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				checked: [],
				checkedStatus: false,
				status: false,
				chechedList:[],
				addressList:[]
			}
		},
		onShow() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			})
			setTimeout(()=>{
				let openid = uni.getStorageSync('openid')
				this.db('address').where({
					_openid: openid
				}).get()
				.then((res) =>{
					if(res.errMsg == 'collection.get:ok'){
						console.log(res.data)
						this.addressList = res.data
						uni.hideLoading()
					}else{
						uni.hideLoading()
						uni.showToast({
							title: '无查询结果',
							icon: 'none',
							duration: 2000
						})
					}
				})
				.catch((err)=>{
					uni.hideLoading()
					uni.showToast({
						title: '无查询结果',
						icon: 'none',
						duration: 2000
					})
				})
			},300)
		},
		methods: {
			//删除地址
			deleteList(){
				//判断地址列表勾选状态以及多选框显示隐藏状态
				if(this.chechedList.length>0 && this.checkedStatus){
					console.log('zxc')
					for (var i = 0; i < this.chechedList.length; i++) {
						this.db('address').doc(this.chechedList[i]).remove()
						.then((data) =>{
							console.log(data)
						})
					}
					this.getdata()
					
				}else if(this.addressList.length>0){
					this.checkedStatus = !this.checkedStatus
				}
				
			},
			//获取地址列表多选框哪些选中
			checkboxChange(e){
				console.log(e.detail.value)
				this.chechedList = e.detail.value
			},
			addAddress(){
				uni.navigateTo({
					url: '../addAddress/addAddress'
				})
			},
			updateAddress(e){
				console.log(e,111111111111)
				uni.navigateTo({
					url: '../updateAddress/updateAddress?addressList='+JSON.stringify(e)
				})
			},
			getdata(){
				let openid = uni.getStorageSync('openid')
				this.db('address').where({
					_openid: openid
				}).get()
				.then((res) =>{
					console.log(res.data,1111111111)
					this.addressList = res.data
				})
			}
		},
	}
</script>

<style scoped>
	.box{
		width: 100%;
		height: 100%;
		background-color: #EEEEEF;
		overflow: hidden;
		position: relative;
	}
	.top_tip{
		width: 100%;
		height: 70rpx;
		background-color: #F1F1F1;
	}
	.top_tip text{
		line-height: 70rpx;
		margin-left: 20rpx;
		font-size: 0.9rem;
	}
	.top_tip .delete{
		width: 20%;
		line-height: 70rpx;
		text-align: center;
		float: right;
		font-size: 1.3rem;
	}
	.address{
		width: 100%;
		height: 100%;
	}
	.address_box{
		width: 95%;
		height: 100vm;
		margin: 10rpx auto;
	}
	.address_list{
		width: 100%;
		height: 120rpx;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		border-radius: 8rpx;
		padding: 30rpx 0;
	}
	.address_list .address_left{
		width: 85%;
		height: 100%;
		float: left;
		margin-left: 15rpx;
	}
	.address_list .address_right{
		width: 10%;
		line-height: 120rpx;
		float: right;
		font-size: 1.5rem;
	}
	.add_address{
		width: 100%;
		height: 100rpx;
		position: absolute;
		bottom: 50rpx;
	}
	.add_address .tipbox{
		width: 90%;
		line-height: 80rpx;
		background-color: #007860;
		text-align: center;
		margin: 0 auto;
		color: #FFFFFF;
		font-size: 1.2rem;
		border-radius: 10rpx;
	}
	.address_left .checked_box{
		width: 10%;
		line-height: 120rpx;
		float: left;
		text-align: center;
		float: left;
		
	}
	.address_left .checked_box checkbox{
		text-align: center;
		transform: scale(0.7);
		margin-left: 10rpx;
	}
	.address_left .person_data{
		width: 90%;
		height: 80rpx;
		float: left;
	}
	.person_data > view{
		width: 100%;
		height: 50%;
		float: left;
		position: relative;
		top: 20rpx;
		margin-bottom: 5rpx;
		
	}
	.person_data .p1 text{
		display: block;
		font-size: 0.9rem;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-left: 10rpx;
		color: #383838;
		
	}
	.person_data .p2 text{
		font-size: 0.8rem;
		margin-right: 10rpx;
		margin-left: 10rpx;
		color: #585858;
	}
</style>
